<template>
  <div class="rank-list" v-if="data.length != 0">
    <h3 class="title">{{ title }}</h3>
    <div class="wrap">
      <div class="rank-info" v-for="(item,index) in data" :key="index">
        <div class="rank-img">
          <img v-lazy="item.dj.avatarUrl" alt="">
        </div>

        <div class="info-detail">
          <div class="info-title" style="font-size:12px">
            <span>{{ item.name }}</span>
          </div>
          <div class="info-msg">
            <div class="info-title" style="font-size:12px">
              <span>
                <svg t="1638952057106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3240" width="200" height="200"><path d="M642.8 531.8c64.3-42.6 106.9-115.4 106.9-198.1C749.7 202.6 643.1 96 512 96S274.3 202.6 274.3 333.7c0 82.7 42.6 155.6 106.9 198.1C215.8 582.9 96 727.7 96 898.3c0 16.4 13.3 29.7 29.7 29.7s29.7-13.3 29.7-29.7c0-180.2 159.9-326.9 356.6-326.9 196.6 0 356.6 146.6 356.6 326.9 0 16.4 13.3 29.7 29.7 29.7s29.7-13.3 29.7-29.7c0-170.6-119.8-315.4-285.2-366.5zM333.7 333.7c0-98.3 80-178.3 178.3-178.3s178.3 80 178.3 178.3S610.3 512 512 512s-178.3-80-178.3-178.3z" fill="#47444F" p-id="3241"></path></svg>
              </span>
              <span>{{ item.dj.nickname }}</span>
            </div>
          </div>
          <div class="info-desc" style="font-size:12px">
            <span>共{{ item.programCount }}期</span>
            <span>订阅{{ item.subCount }}次</span>
          </div>
        </div>
      </div>
    </div>
  </div> 
</template>

<script>
  export default {
    props:{
      title: String,
      data: Array
    }
  }
</script>

<style scoped>
.rank-list{
  padding-bottom: 60px;
}

.title{
  padding: 10px;
  border-bottom: 1px solid red;
}

.wrap{
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.rank-info{
  display: flex;
  align-items: center;
  width: 50%;
}

.rank-img img{
  width: 60px;
  height: 60px;
}
</style>